<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>qq音乐</title>
	<link rel="stylesheet" href="css/bace.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/denglu.css">
	<link rel="stylesheet" href="css/zhuce.css">
	<script src="js/index.js"></script>
</head>

<body>
	<nav>
		<div class="w">
			<div class="logo">
				<h1>
					<a href="QQ音乐.html">qq音乐</a>
				</h1>
			</div>
			<ul class="nav_ul">
				<li><a href="javascript:;">音乐馆</a></li>
				<li><a href="javascript:;">我的音乐</a></li>
				<li><a href="javascript:;">客户端</a></li>
				<li><a href="javascript:;">音乐号</a></li>
				<li><a href="javascript:;">VIP</a></li>
			</ul>
			<div class="search">
				<input type="text" placeholder="中国好声音第二季" class="text">
				<a href="">
					<img src="img/search.png" alt="">
				</a>
				<button id="click">登录</button>
			</div>
			<div class="pay">
				<div class="pay">
					<a class="pay_l bottom">开通VIP</a>
					<ol class="nav_ol_l">
						<li>开通绿钻豪华版</li>
						<li>开通付费包</li>
					</ol>
					<a class="pay_r bottom btm">充值</a>
					<ol class="ol_r">
						<li>购买乐币</li>
						<li>充值饭票</li>
					</ol>
				</div>
			</div>
		</div>
	</nav>

	<header>
		<div class="w">
			<h1>新歌首发</h1>
			<ul>
				<li><a href="">内地</a></li>
				<li><a href="">港台</a></li>
				<li><a href="">欧美</a></li>
				<li><a href="">韩国</a></li>
				<li><a href="">日本</a></li>
				<div class="all">
					<a href="">全部 ></a>
				</div>
			</ul>
			<ol>
				<li>
					<a href="">
						<img src="img/11.jpg" alt="">
					</a>
					<span>
						<p>我们的时光</p>
						<em>TFBOYS</em>
					</span>
				</li>
				<li>
					<a href="">
						<img src="img/12.jpg" alt="">
					</a>
					<span>
						<p>异想</p>
						<em>陈翔</em>
					</span>
				</li>
				<li>
					<a href="">
						<img src="img/13.jpg" alt="">
					</a>
					<span>
						<p>陪你听全世界</p>
						<em>丢火车乐队</em>
					</span>
				</li>
				<li>
					<a href="">
						<img src="img/14.jpg" alt="">
					</a>
					<span>
						<p>中国新歌声第二季 第4期</p>
						<em>中国新歌声</em>
					</span>
				</li>
			</ol>
		</div>

	</header>

	<div class="hot_sing">
		<div class="w">
			<h1>热门歌单</h1>
			<ul>
				<li>
					<a href="">
						<img src="img/21.jpg" alt="">
					</a>
					<span>
						<p>权威：香港英皇旗下歌手全收录！</p>
						<em>播放量：42.5万</em>
					</span>
				</li>
				<li>
					<a href="">
						<img src="img/22.jpg" alt="">
					</a>
					<span>
						<p>自创语言：历史老师听了也蒙圈的造语歌</p>
						<em>播放量：11.0万</em>
					</span>
				</li>
				<li>
					<a href="">
						<img src="img/23.jpg" alt="">
					</a>
					<span>
						<p>YouTube点击量TOP100的EDM电音视频</p>
						<em>播放量：35.4万</em>
					</span>
				</li>
				<li>
					<a href="">
						<img src="img/24.jpg" alt="">
					</a>
					<span>
						<p>一个人在家吃泡面绝对会听哭的BGM</p>
						<em>播放量：172.8万</em>
					</span>
				</li>
			</ul>
		</div>
	</div>

	<div class="MV">
		<div class="w">
			<h1>MV首播</h1>
			<ul>
				<li><a href="">全部</a></li>
				<li><a href="">内地</a></li>
				<li><a href="">港台</a></li>
				<li><a href="">欧美</a></li>
				<li><a href="">韩国</a></li>
				<li><a href="">日本</a></li>
				<a href="">
					<div class="all">全部 ></div>
				</a>
			</ul>
			<ol>
				<li>
					<a href="">
						<img src="img/31.jpg" alt="">
						<span>
							<p>Summer Storm</p>
							<em>제시카</em>
							<em>13.9万</em>
						</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="img/32.jpg" alt="">
						<span>
							<p>海胆</p>
							<em>陈奕迅</em>
							<em>10.3万</em>
						</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="img/33.jpg" alt="">
						<span>
							<p>我心翱翔</p>
							<em>SNH48</em>
							<em>1.8万</em>
						</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="img/34.jpg" alt="">
						<span>
							<p>你点的歌救了我 (影视版)(《噗通噗通我爱你》电视剧片头曲)</p>
							<em>A-Lin</em>
							<em>6272</em>
						</span>
					</a>
				</li>
			</ol>
		</div>
	</div>

	<div class="foot">
		<div class="w">
			<div class="foot_l fl">
				<p>下载QQ音乐客户端</p>
				<ul>
					<li>
						<a href="">
							<span>PC版</span>
						</a>
					</li>
					<li>
						<a href="">
							<span>Mac版</span>
						</a>
					</li>
					<li>
						<a href="">
							<span>Android版</span>
						</a>
					</li>
					<li>
						<a href="">
							<span>iPhone版</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="foot_m fl">
				<p>特色产品</p>
				<ul>
					<li>
						<span>全民K歌</span>
						<em>车载互联</em>
					</li>
					<li>
						<span>Super Sound</span>
						<em> QQ演出</em>
					</li>
					<li>
						<span>QPlay</span>
					</li>
				</ul>
			</div>
			<div class="foot_r">
				<p>合作链接</p>
				<ol>
					<li>
						<a href="">CJE&M</a>
					</li>
					<li>
						<a href="">最新版QQ</a>
					</li>
					<li>
						<a href="">QQ浏览器</a>
					</li>
					<li>
						<a href="">星钻</a>
					</li>
				</ol>
				<ol>
					<li>
						<a href="">腾讯视频</a>
					</li>
					<li>
						<a href="">腾讯社交广告</a>
					</li>
					<li>
						<a href="">画报</a>
					</li>
					<li>
						<a href="">腾讯微云</a>
					</li>
				</ol>
				<ol>
					<li>
						<a href="">手机QQ空间</a>
					</li>
					<li>
						<a href="">电脑管家</a>
					</li>
					<li>
						<a href="">黄钻活动</a>
					</li>
					<li>
						<a href="">更多</a>
					</li>
				</ol>
			</div>

			<div class="footer">
				<p>关于腾讯 | About Tencent | 服务条款 | 用户服务协议 | 隐私政策 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
				<p>Copyright 1998 - 2017 Tencent. All Rights Reserved.</p>
				<p>腾讯公司©版权所有 腾讯网络文化经营许可证</p>
			</div>
		</div>
	</div>


	<!-- 登录页 -->
	<div id="box">
		<h3>登录</h3>
		<input type="text" value="" placeholder="请输入用户名/电话号码/邮箱..." class="text">
		<br>
		<input type="password" name="" id="code">
		<img src="img/close.jpg" alt="">
		<div id="close">关闭</div>
		<button id="btn1">登录</button>
		<button id="btn2">注册</button>
	</div>

	<!-- 注册页 -->
	<table align="center" width="350">
		<caption>新人注册</caption>
		<tr>
			<td>姓名：</td>
			<td>
				<input type="text" value="" class="key">
			</td>
		</tr>
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="相同" id="nan" />
				<label for="nan"><img src="img/nan.jpg" alt=""> 男</label>
				<input type="radio" name="相同" id="nv" />
				<label for="nv"><img src="img/nv.jpg" alt=""> 女</label>
			</td>
		</tr>
		<tr>
			<td>学历：</td>
			<td>
				<input type="text" value="" class="key">
			</td>
		</tr>
		<tr>
			<td>自我介绍：</td>
			<td>
				<textarea name="" id="" cols="30" rows="5" class="key">自我介绍</textarea>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<input type="checkbox" checked="">承诺已满18岁
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<input type="submit" value="免费注册" id="move">
				<button id="table_btn">登录</button>
			</td>
		</tr>
	</table>
</body>

</html>